<template>
    <div>
        <el-dialog v-model="dialogVisible" title="编辑僵尸" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="false" style="text-align: center;" width="40%">
            <div style="display: flex; justify-content:center;">
                <el-form style="width: 80%;" label-position="left" :model="form">
                    <el-form-item label="名称">
                        <el-input v-model="form.name" autocomplete="off" placeholder="名称" />
                    </el-form-item>
                    <el-form-item label="攻击">
                        <el-input v-model="form.atk" autocomplete="off" placeholder="攻击" />
                    </el-form-item>
                    <el-form-item label="生命">
                        <el-input v-model="form.hp" autocomplete="off" placeholder="生命" />
                    </el-form-item>
                    <el-form-item label="僵尸图片">
                        <x-uploader :currentImg="form.img" :result="handleUpload"></x-uploader>
                    </el-form-item>
                    <el-form-item label="僵尸描述">
                        <el-input v-model="form.description" autosize type="textarea" autocomplete="off"
                            placeholder="僵尸描述" />
                    </el-form-item>

                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleEditOk">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import XUploader from './x-uploader.vue';


const props = defineProps({
    dialogVisible: Boolean,
    form: Object,
    handleClose: Function
})

const handleEditOk = () => {
    props.handleClose(props.form)
}

const handleUpload = (img) => {
    props.form.img = img
}

</script>

<style lang="scss" scoped>

</style>